<html xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">


</head>
<body >

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="/index">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div>
          <li class="layui-nav-item" lay-unselect="">
            <div id="">
              <div style="margin-right: 5px">
                <img id="userImg" th:if="${session.userImg != null}"  th:src="${session.userImg}"  class="layui-nav-img">
              </div>
              <div id="username" style="color: crimson;margin-right: 6px;font-size: 24px" th:text="${session.userName}"></div>

            </div>
            <!--<dl class="layui-nav-child">-->
            <!--<dd><a href="javascript:;">修改信息</a></dd>-->
            <!--<dd><a href="javascript:;">安全管理</a></dd>-->
            <!--<dd><a href="javascript:;">退了</a></dd>-->
            <!--</dl>-->
          </li>
        </div>
        <div class="login"><a href="/login.html"><p th:text="${session.userName!=null?'':'登录'}"></p>&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color:coral;margin-right: 6px;font-size: 15px" href="/myself">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color: coral;margin-right: 6px;font-size: 15px" href="/showShopCart">购物车</a><span th:text="${size}"></span></div>
        <div class="sp-cart myorder"><a href="/showOrder">&nbsp;&nbsp;&nbsp;我的订单</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="/index" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="" required  lay-verify="required" id="content" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="searchShopping()">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base commodity-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="/show" class="active" >所有商品</a>
            <a href="/bulk">今日折扣</a>
            <a href="/information">母婴资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="commod-cont-wrap">
      <div class="commod-cont w1200 layui-clear">
        <div class="left-nav">
          <div class="title">所有分类</div>
          <!--//总分类、分类菜单显示-->
          <div class="list-box">
              <dl th:each="lm:${classify}"   >
                <dt th:text="${lm.classifyName}" ></dt>
                  <dd th:each="ln:${speciesList}" >
                    <p th:if="${lm.classifyId == ln.classId}"   >
                       <a  th:text="${ln.speciesName}" th:onclick="'javascript:goRead(\''+${ln.speciesId}+'\')'"  ></a>
                    </p>
                  </dd>
              </dl>
          </div>

        </div>
        <div class="right-cont-wrap">
          <div class="right-cont">
            <div class="layui-form-item sort layui-clear">
              <ul class="layui-nav layui-bg-cyan">
                <li class="layui-nav-item" layui-this><a href="">销量</a></li>
                <li class="layui-nav-item "><a href="#" onclick="newProducts()">最新</a></li>
                <li class="layui-nav-item">
                  <a href="javascript:;">价格</a>
                  <dl class="layui-nav-child">
                    <dd><a href="#" onclick="priceAscendingOrder()">升序</a></dd>
                    <dd><a href="#" onclick="priceDescendingOrder()">降序</a></dd>
                  </dl>
                </li>
               <!-- <li class="layui-nav-item"><a href="">社区</a></li>-->
              </ul>
            </div>
            <!--<div class="sort layui-clear">
              <a class="active" href="javascript:;" event = 'volume' >销量</a>
              <a href="javascript:;" event = 'price'>价格</a>
              <a><label class="layui-form-label">价格</label></a>
              <a><input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"></a>
              <div class="layui-form-mid">-</div>
              <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
              <a href="javascript:;" event = 'newprod'>新品</a>
              <a href="javascript:;" event = 'collection'>收藏</a>
            </div>-->

            <!--<div class=" cont-list layui-clear goodsList"  id="list-cont">-->

            <!--</div>-->

          <div class="cont-list layui-clear" id="list-cont">
              <div class="item" th:each="goods:${content}" id="follow">
                <div class="img">
                  <a th:href="@{'/details?id ='+${goods.goodsId}}"><img th:src="${goods.consultImgUrl}" style="width: 280px;height: 280px" ></a>
                </div>
                <div class="text">
                  <p class="title" th:text="${goods.goodsName}"></p>
                  <p class="price">
                    <span class="pri" th:text=" '单价：' + ${goods.price} + '￥'"></span>
                    <span class="nub" th:text="${goods.collectNum} + '付款'"></span>
                  </p>
                </div>
              </div>
            </div>

            <!--//显示分类具体商品-->
            <div class="cont-list layui-clear flow-default "  id="LAY_demo11">

            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
              <legend>所有商品</legend>
            </fieldset>
            <!--//显示所有商品-->
            <div class="cont-list layui-clear flow-default "  id="LAY_demo1">

            </div>

           <div class="cont-list layui-clear" id="list-cont">
            <div class="item" th:each="goods:${goods}" id="follow">
                <div class="img">
                  <a th:href="@{'/details?id='+${goods.goodsId}}"><img th:src="${goods.consultImgUrl}" style="width: 280px;height: 280px" ></a>
                </div>
                <div class="text">
                  <p class="title" th:text="${goods.goodsName}"></p>
                  <p class="price">
                    <span class="pri" th:text=" '单价：' + ${goods.price} + '￥'"></span>
                    <span class="nub" th:text="${goods.collectNum} + '付款'"></span>
                  </p>
                </div>
           </div>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>

  <script src="/res/layui/layui.js" charset="utf-8"></script>
  <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
  <script th:inline="javascript">
      /*layui.use('flow', function(){
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo1' //流加载容器
              ,scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。
              ,done: function(page, next){ //执行下一页的回调
                  //数据插入
                  setTimeout(function(){
                      var div =[];
                      var lis = [];
                      /!*获取前端传来的list列表*!/
                      var goods = [[${goods}]];
                      for(var i = 0; i < 9; i++){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?"+goods[i].goodsId+"\"><img src=\""+goods[i].consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+goods[i].goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+goods[i].price+"</span>";
                          div += "<span class=\"nub\" >"+goods[i].collectNum+"付款"+"</span>"+"</p></div></div>";

                      }
                      lis.push(div)
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < goods.length/9+1); //假设总页数为 10
                      /!*$("#LAY_demo1").html(div);*!/
                  }, 500);
              }
          });
      });*/

      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo1' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/classifysController?page='+page, function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  </script>


<script type="text/javascript" >
var $;
  layui.config({
    base: '/res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','laypage','jquery'],function(){
      var laypage = layui.laypage,jquery = layui.jquery,
     mm = layui.mm;
     $=jquery;
       laypage.render({
        elem: 'demo0'
        ,count: 100 //数据总数
      });
       $('.sort a').on('click',function(){
      $(this).addClass('active').siblings().removeClass('active');
    })

      $('.list-box dt').on('click',function(){
      if($(this).attr('off')){
        $(this).removeClass('active').siblings('dd').show()
        $(this).attr('off','')
      }else{
        $(this).addClass('active').siblings('dd').hide()
        $(this).attr('off',true)
      }
    })
});
  /*显示分类商品*/
  function goRead(speciesId){

      $("#LAY_demo11").empty();
      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo11' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/goodsController/goodslist?page='+page +'&speciesId='+speciesId, function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  }
  /*显示最新商品*/
  function newProducts(){
      $("#LAY_demo11").empty();
      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo11' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/goodsController/newProducts?page='+page , function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  }
  /*显示价格升序商品*/
  function priceAscendingOrder(){

      $("#LAY_demo11").empty();
      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo11' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/goodsController/priceAscendingOrder?page='+page, function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  }
  /*显示价格降序商品*/
  function priceDescendingOrder(){

      $("#LAY_demo11").empty();
      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo11' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/goodsController/priceDescendingOrder?page='+page , function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  }
  /*显示搜索商品*/
  function searchShopping(){
      var content = document.getElementById("content").value;
      $("#LAY_demo11").empty();
      layui.use('flow', function(){
          var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
          var flow = layui.flow;
          flow.load({
              elem: '#LAY_demo11' //指定列表容器
              ,isAuto: false
              ,isLazyimg: true
              ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                  var lis = [];
                  var div = [];
                  //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                  $.getJSON('/goodsController/searchShopping?page='+page +'&content='+content, function(res){
                      //假设你的列表返回在data集合中
                      layui.each(res, function(index, item){
                          div +="<div class=\"item\">";
                          div +="<div class=\"imgo\">";
                          div +=" <a href=\"/details?id="+item.goodsId+"\"><img src=\""+item.consultImgUrl+"\" style=\"width: 280px;height: 280px\" ></a>";
                          div +="</div>";
                          div +="<div class=\"text\">";
                          div += " <p class=\"title\">"+item.goodsName+"</p>";
                          div += "<p class=\"price\">";
                          div += "<span class=\"pri\" >"+"￥"+item.price+"</span>";
                          div += "<span class=\"nub\" >"+item.collectNum+"付款"+"</span>"+"</p></div></div>";
                      });
                      lis.push(div);
                      //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                      //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                      next(lis.join(''), page < res.length +1);
                  });
              }
          });
      });
  }


</script>


</body>
</html>